<template>
  <div class="flexcenter">
    <chart :cdata="cdata1" />
    <chart :cdata="cdata2" />
    <chart :cdata="cdata3" />
    <chart :cdata="cdata4" />
    <chart :cdata="cdata4" />
    <chart :cdata="cdata4" />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted, reactive } from "vue";
import Chart from "./chart/draw2";
export default defineComponent({
  components: {
    Chart,
  },
  setup() {
    let height = "150px";
    let width = "180px";
    const cdata1 = reactive({
      seriesData: [{ name: "水位", value: 55 }],
      height,
      width,
    });

    const cdata2 = reactive({
      seriesData: [{ name: "温度", value: 55 }],
      height,
      width,
    });

    const cdata3 = reactive({
      seriesData: [{ name: "水位", value: 55 }],
      height,
      width,
    });
    const cdata4 = reactive({
      seriesData: [{ name: "压力", value: 55 }],
      width,
      height,
    });

    let intervalInstance = setInterval(() => {
      const data = cdata1.seriesData;
      cdata1.seriesData = data.map((e) => {
        return { value: Math.round(100 * Math.random()), name: e.name };
      });
    }, 1000);

    onUnmounted(() => {
      clearInterval(intervalInstance);
    });
    return {
      cdata1,
      cdata2,
      cdata3,
      cdata4,
    };
  },
});
</script>

<style lang="scss" scoped>
$box-width: 100%;
$box-height: 100%;

.flexcenter {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
  align-items: center;
}
</style>
